<script setup lang="ts">
import { ref , onMounted,computed} from 'vue'
import { getAllDepAPI } from '@/services/consult'
import { TopDep } from '@/types/consult'
import {  useConsultStore } from '@/stores'
const store = useConsultStore()
const active = ref(0)

const depAllList = ref<TopDep[]>([])

//定义函数获取科室
const getDepAll = async() => {
 const res = await  getAllDepAPI()
//  console.log(res);
 depAllList.value = res.data
}

//使用计算属性获取2级科室
const subDepAll = computed(()=>depAllList.value[active.value]?.child)

onMounted(()=>{
    getDepAll()
})
</script>

<template>
  <div class="consult-dep-page">
    <cp-nav-bar title="选择科室" />
        <div class="wrapper">
            <!-- 一级科室 -->
        <van-sidebar v-model="active">
            <van-sidebar-item 
            :title="item.name"
            v-for="item in depAllList" 
            :key="item.id"/>
        </van-sidebar>
        <!-- 二级科室 -->
        <div class="sub-dep">
            <router-link 
            to="/consult/illness"
            v-for="subDep in subDepAll" 
            :key="subDep.id"
            @click="store.setDepId(subDep.id)"
            >{{subDep.name}}
        </router-link>
        </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.van-sidebar {
  width: 114px;
  &-item {
    padding: 14px;
    color: var(--cp-tag);
    &--select {
      color: var(--cp-main);
      font-weight: normal;
      &::before {
        display: none;
      }
    }
  }
}
.consult-dep-page {
  padding-top: 46px;
}
.wrapper {
  height: calc(100vh - 46px);
  overflow: hidden;
  display: flex;
  .sub-dep {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    > a {
      display: block;
      padding: 14px 30px;
      color: var(--cp-dark);
    }
  }
}
</style>